<template>
  <a-button type="primary" :class="classNames" v-bind="$attrs" v-on="$listeners">
    <slot />
  </a-button>
</template>

<script>
export default {
  name: 'CButton',
  props: {
    type: {
      type: String,
      default: 'primary'
    }
  },
  computed: {
    classNames() {
      return `c-btn-${this.type}`
    }
  }
}
</script>

<style lang="less" scoped>
.c-btn-primary,
.c-btn-danger {
  border: none;
}
.c-btn-primary:not([disabled]) {
  background: rgba(113, 175, 239, 0.1);
  color: #5eb0f5;
  border: rgba(113, 175, 239, 0.1);
  text-shadow: none;
  box-shadow: none;

  &:hover,
  &:focus {
    background: rgba(113, 175, 239, 0.08);
    color: #5eb0f5;
  }
}
.c-btn-danger:not([disabled]) {
  background: rgba(236, 112, 113, 0.1);
  color: #fd666d;
  border: rgba(236, 112, 113, 0.1);
  text-shadow: none;
  box-shadow: none;

  &:hover,
  &:focus {
    background: rgba(236, 112, 113, 0.08);
    color: #fd666d;
  }
}
</style>
